<template>
  <div class="p-14px shadow flex-center gap-12px">
    <el-select v-model="localChatStore.currentModel" placeholder="请选择模型">
      <el-option
        v-for="item in modelStore.list.filter((el) => el.status === 'success')"
        :key="item.name"
        :label="item.name"
        :value="item.name"
      ></el-option>
    </el-select>
    <el-badge :value="pullLength" :show-zero="false">
      <el-icon
        class="cursor-pointer"
        size="24px"
        color="var(--el-text-color-primary)"
        @click="handleManage"
      >
        <Setting />
      </el-icon>
    </el-badge>
    <Settings v-model="visible"></Settings>
  </div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ToolBar' })
import { Setting } from '@element-plus/icons-vue'
import Settings from './settings.vue'
import { useModelStore } from '@/stores/model'
import { useLocalChatStore } from '@/stores/local'

const modelStore = useModelStore()

const localChatStore = useLocalChatStore()
const pullLength = computed(() => {
  return modelStore.list.filter((el) => el.status === 'loading').length
})

onMounted(() => {
  if (!modelStore.host) {
    visible.value = true
    ElMessage.warning('请先设置ollama服务地址')
    return
  }
  modelStore.getList()
})

const visible = ref(false)
const handleManage = () => {
  visible.value = true
}
</script>
<style lang="scss"></style>
